<template>
  <div class="login-box">
    <span class="login-title">修改账户信息</span>
    <el-form :rules="formRules" ref="form" :model="form" label-width="80px">
      <el-form-item label="用户名">
        <el-input v-model="username" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="昵称">
        <el-input
          v-model="nickname"
          v-on:input="onchanges()"
          class="niken"
        ></el-input>
        <el-button
          type="primary"
          class="changeniken"
          @click="changeniken"
          :disabled="isdisabled"
          >修改</el-button
        >
      </el-form-item>
      <el-form-item label="原密码" prop="password">
        <el-input v-model="form.password" show-password></el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword">
        <el-input v-model="form.newPassword" show-password></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="accPassword">
        <el-input v-model="form.accPassword" show-password></el-input>
      </el-form-item>
      <el-form-item class="used">
        <el-button type="primary" @click="onSubmit">修改</el-button>
        <el-button @click="clear">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      isdisabled: true,
      nickname: "",
      form: {
        password: "",
        newPassword: "",
        accPassword: "",
        token: window.sessionStorage["token"],
      },
      username: "",
      formRules: {
        password: [{ required: true, message: " ", trigger: "blur" }],
        newPassword: [{ required: true, message: " ", trigger: "blur" }],
        accPassword: [{ required: true, message: " ", trigger: "blur" }],
      },
    };
  },
  methods: {
    // 修改昵称
    changeniken() {
      axios
        .post("/changeuser", { name: this.nickname, token: this.form.token })
        .then((res) => {
          this.$message.success(res.data.msg);
        });
    },
    // 当昵称发生改变时触发
    onchanges() {
      let usename = window.sessionStorage["username"];
      if (usename == this.nickname || this.nickname == "") {
        this.isdisabled = true;
      } else {
        this.isdisabled = false;
      }
    },
    onSubmit() {
      this.$refs.form.validate(async (valid) => {
        if (!valid) {
          this.$message.error("请完成所有内容");
          return;
        }
        const { data: res } = await this.$http.post("changeuser", this.form);

        if (this.form.password == this.form.newPassword) {
          this.$message.error("新密码与旧密码相同");
          return;
        }
        if (this.form.accPassword !== this.form.newPassword) {
          this.$message.error("两次输入的新密码不匹配");
          return;
        }

        if (res.code !== 200) {
          this.$message.error(res.msg);
          return;
        } else {
          this.$message.success(res.msg);
          this.$router.push({ path: "/login" });
        }
      });
    },
    clear() {
      this.form.password = "";
      this.form.newPassword = "";
    },
    async getUserMsg() {
      var param = new FormData();
      param.append("token", window.sessionStorage["token"]);
      const { data: res } = await this.$http.post("getuser", param);
      this.nickname = res.data.name;
    },
  },
  created() {},
  mounted() {
    this.username = window.sessionStorage["username"];
    this.getUserMsg();

    // 未登录路由到login
    if (window.sessionStorage["username"] == undefined) {
      this.$router.push({ path: "/login" });
      this.$message.error("请先登录！！！！");
    }
  },
};
</script>
<style scoped>
.el-input {
  width: 80%;
}
.niken {
  width: 65%;
}
.changeniken {
  transform: translateX(-175px);
  display: inline-block;
}
.used {
  position: relative;
  left: -25%;
}
.login-box {
  border: 1px solid #dcdfe6;
  width: 500px;
  margin: 10% auto;
  padding: 35px 35px 15px 35px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  box-shadow: 0 0 25px black;
}
.login-title {
  text-align: center;
  margin: 0 auto 60px auto;
  color: black;
  font-size: 30px;
  font-weight: bold;
  position: relative;
  left: 25%;
}
</style>